<template>
  <div class="function-div">
    <div style="display: flex;justify-content: space-between">
      <span style="font-size: 16px;">浏览明细表(商品)</span>
      <a-button @click="backIndexPage">返回</a-button>
    </div>
    <div style="height: 10px;"></div>
    <search-table
      :url="url"
      ref="searchtable"
      :columns="columns"
      :defaultParams="defaultParams"
      :headParams="headParams"
      :form="form"
      hide-select
      :extra-fun="acquireAllAdditionData"
      :x-length="2000">
      <!-- 搜索条件 -->
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="用户昵称">
            <a-input
              style="width:180px"
              v-decorator="[
                'nickname',
              ]"
              placeholder="用户昵称"
            >
            </a-input>
          </a-form-item>

          <a-form-item label="会员级别">
            <a-select
              style="width:180px"
              v-decorator="[
                'membershipGrade',
              ]"
              allowClear
              placeholder="会员级别"
              :options="vipList"
            >
            </a-select>
          </a-form-item>


          <a-form-item label="手机号">
            <a-input
              style="width:180px"
              v-decorator="[
                'userPhone',
              ]"
              placeholder="手机号"
            >
            </a-input>
          </a-form-item>

          <a-form-item label="商品名称">
            <a-input
              style="width:180px"
              v-decorator="[
                'goodsName',
              ]"
              placeholder="商品名称"
            >
            </a-input>
          </a-form-item>

          <a-form-item label="商品id">
            <a-input
              style="width:180px"
              v-decorator="[
                'goodsId',
              ]"
              placeholder="商品id"
            >
            </a-input>
          </a-form-item>

          <a-form-item label="是否下单">
            <a-select
              style="width:180px"
              v-decorator="[
                'isOrder',
              ]"
              placeholder="全部"
              allowClear
              :options="isOrderList"
            >
            </a-select>
          </a-form-item>


          <a-form-item label="浏览渠道">
            <a-select
              style="width:180px"
              v-decorator="[
                'intoChannel',
              ]"
              allowClear
              placeholder="全部"
              :options="intoChannelList"
            >
            </a-select>
          </a-form-item>

       <!--   <a-form-item label="分享名称">
            <a-input
              style="width:180px"
              v-decorator="[
                'shareName',
              ]"
              placeholder="分享名称"
            >
            </a-input>
          </a-form-item>-->



         <!-- <a-form-item label="分享类型">
            <a-select
              style="width:180px"
              v-decorator="[
                'shareType',
              ]"
              allowClear
              placeholder="全部"
              :options="shareTypeList"
            >
            </a-select>
          </a-form-item>-->

          <a-form-item label="用户id">
            <a-input
              style="width:180px"
              v-decorator="[
                'userId',
              ]"
              placeholder="输入用户id"
            >
            </a-input>
          </a-form-item>

          <a-form-item label="进入时间">
            <fast-range-picker
              allowClear
              v-decorator="['enterPageTime-outPageTime']"
            >
            </fast-range-picker>
          </a-form-item>
        </a-form>

      </template>
      <!-- 操作栏 -->

      <template slot="oprationRow">
        <div>
          <browserAddition v-bind="dataAddition"></browserAddition>
        </div>
        <permission authority="">
          <a-button type="primary" @click="exportExcel">导出</a-button>
        </permission>
        <permission authority="">
<!--          <a-button type="primary" @click="refreshList()">刷新列表</a-button>-->
        </permission>

      </template>
      <!-- 表格行操作 record -->
      <template slot="tableOperation" slot-scope="{  }">
        <a-space></a-space>
      </template>
    </search-table>

  </div>
</template>

<script>
  import SearchTable from "../components/searchTable";
  import { findDictNameByValue,createOptionsByDict } from '@/utils/dict'
  import browserAddition from "../components/browserAddition";

  export default {
    name: 'browserDetail',
    components: {
      SearchTable,
      browserAddition
    },
    data() {
      return {
        // 列表接口地址
        // url: 'goldenhome/member/admin_/member/benefits/page',
        // "_/goldenhome/data/statistics/web/admin/browsData/getGoodsGroupType"
        url: '_/goldenhome/data/statistics/web/admin/browsData/getGoodsStatistics',
        headParams: {}, // 请求头参数
        defaultParams: {
          shopId:this.$store.getters.userInfo.shopId
        }, // 默认携带参数
        currentRecord: {}, // 选中行数据
        infoVisible: false, // 弹窗是否显示
        handle: '', // 操作类型
        form: this.$form.createForm(this, { name: "table_search" }), // 搜索表单
        columns: [
          {
            title: "用户头像",
            dataIndex: "headPortrait",
            key:"headPortrait",
            fixed:"left",
            customRender:(text,row)=>{
              return <table-img src={row.headPortrait}/>
            }
          },
          {
            title: "用户昵称",
            dataIndex: "nickname",
            key:"nickname"
          },
          {
            title: "会员级别",
            dataIndex: "membershipGrade",
            key:"membershipGrade"
          },
          {
            title: "用户ID",
            dataIndex: "userId",
            key:"userId"
          },
          {
            title: "手机号",
            dataIndex: "userPhone",
            key:"userPhone"
          },
          {
            title: "商品名称",
            dataIndex: "goodsName",
            key:"goodsName"
          },
          {
            title: "商品ID",
            dataIndex: "goodsId",
            key:"goodsId"
          },
          {
            title: "浏览进入时间",
            dataIndex: "enterPageTime",
            key:"enterPageTime"
          },
          {
            title: "浏览退出时间",
            dataIndex: "outPageTime",
            key:"outPageTime"
          },
          {
            title: "浏览时长",
            dataIndex: "browseTime",
            key:"browseTime",
            customRender:(text,row)=>{
              return this.timeChange(text)
            }
          },
          {
            title: "是否下单",
            dataIndex: "buy",
            key:"buy",
            customRender:(text,row)=>{
              if (!!row.orderId){
                return "是"
              }else {
                return "否"
              }
            }
          },
          // {
          //   title: "订单详情",
          //   dataIndex: "orderId",
          //   key:"orderId",
          //   customRender:(text,row)=>{
          //     const toOrderPage =(text,row)=>{
          //       // 根据 订单id 去详情页
          //    /*    console.log("去详情页")
          //       this.$router.push({
          //         name: 'OrderListInfo',
          //         query:{
          //           id:text
          //         },
          //       })*/

          //       let routes = this.$router.resolve({
          //         name: "OrderListInfo",
          //         query: {
          //           id: text,
          //         },
          //       });

          //       window.open(routes.href, "_blank");
          //     }
          //     let content
          //     if (!!row.orderId){
          //       //  content = (<a-button type="link" onClick={ toOrderPage}>详情</a-button>);
          //       content="——"
          //     }else {
          //       content="——"
          //     }
          //     const obj = {
          //       children: content,
          //       attrs: {},
          //     };
          //     return obj;
          //   }
          // },
          {
            title: "浏览渠道",
            dataIndex: "intoChannel",
            key:"intoChannel"
          },
        /*  {
            title: "分享名称",
            dataIndex: "shareName",
            key:"shareName",
            customRender:(text,row)=>{
              return !text ? "——" : text
            }
          },
          {
            title: "分享类型",
            dataIndex: "type",
            key:"type",
            customRender:(text,row)=>{
              return !text ? "——" : text
            }
          },
          {
            title: "登录IP地址",
            dataIndex: "loginIp",
            key:"loginIp",
            customRender:(text,row)=>{
              return !text ? "——" : text
            }
          },
          {
            title: "登录地理位置",
            dataIndex: "loginAddress",
            key:"loginAddress",

            fixed: "right",
            customRender:(text,row)=>{
              return !text ? "——" : text
            }
          },*/
        /*  {
            title: "操作",
            dataIndex: "operation",
            scopedSlots: { customRender: "operation" },

            fixed: "right"
          }*/
        ],

        vipList:[],
        isOrderList:[{label:'全部',value:''},{label:'是',value:'1'},{label:'否',value:'2'}],
        // intoChannelList:[{label:'全部',value:''},{label:'公众号',value:'1'},{label:'小程序',value:'2'},{label:'用户分享',value:'3'},{label:'代理分享',value:'4'}],
        intoChannelList:[{label:'全部',value:''},{label:'小程序',value:'2'}],
        shareTypeList:[{label:'全部',value:''},{label:'公众号文章',value:'1'},{label:'链接',value:'2'},{label:'海报',value:'3'}],
        dataAddition:{
            // 公众号
            GZHbrowerTimes:"",
            GZHshareTimes:"",
            GZHbrowerTime:"",
            GZHarticleTime:'',
            GZHbuyTimes:'',
            GZHarticletimes:'',

            //小程序XCX

            XCXHbrowerTimes:"",
            XCXHshareLinkTimes:"",
            XCXHshareshop:"",
            XCXbrowerTime:"",
            XCXHLinkTime:'',
            XCXHshopTime:'',
            XCXbuyTimes:'',
            XCXarlinktimes:'',
            XCXarshoptimes:'',
            // 用户分享
            userSharebrowerTimes:"",
            userShareTypeLink:"",
            userSharebrowerTime:"",
            userShareLinkTime:'',
            userSharebuyTimes:'',
            userSharearLinktimes:'',

            //代理分享proxyShare
            proxySharebrowerTimes:"",
            proxyShareshareLinkTimes:"",
            proxySharesharePoster:"",
            proxySharebrowerTime:"",
            proxyShareLinkTime:'',
            proxySharePosterTime:'',
            proxySharebuyTimes:'',
            proxySharearlinktimes:'',
            proxySharearpostertimes:'',

        }
      };
    },
    created() {
      // 获取全部会员卡信息
    this.getVipList()
    },
    mounted() {},
    computed:{

    },
    methods: {
      // 获取会员列表
      getVipList(){
        this.$get('goldenhome/member/admin_/member/gradeconfig/list').then((res)=>{
          if (res && res.returnCode === 1000) {
            // this.$message.success('操作成功!')
            console.log("vip列表:",res)
            res.dataInfo.forEach((item) => {
              const {id, gradeName, ...other} = item
              this.vipList.push ({id:id,gradeName:gradeName})
            })
            this.vipList.forEach((item) => {
              this.$set(item, "label", item.gradeName)
              // this.$set(item, "value", item.id)
              this.$set(item, "value", item.gradeName)

            })

            // console.log('this.vipList', this.vipList)
          }
        })
      },
      // 打开详情
      openInfo(record, type) {
        this.currentRecord = record
        this.infoVisible = true
        this.handle = type || 'edit'
      },
      // 关闭弹窗
      closeModal(freshTable) {
        this.infoVisible = false
        if (freshTable) {
          this.$refs.searchtable.refreshTable();
        }
      },


      refreshList(){
        //
        console.log("刷新列表")
        // this.$refs.searchtable.refreshTable();
        this.$refs.searchtable.handleSearch()
      },
      // 获取汇总的数据
      acquireAllAdditionData(obj){

        let params = {...obj}
        let url = "_/goldenhome/data/statistics/web/admin/browsData/getGoodsGroupType"
        console.log(params,url)
        this.$post(url,{...params}).then((res)=>{
          if (res && res.returnCode==1000){
            console.log("汇总结果 数据赋值：",res);
            let dataSource =  res.dataInfo

            // 遍历
            for (const item of dataSource) {
              console.log(item.intoChannel)
              if (item.intoChannel.key=="小程序"){
                // 次数
                this.dataAddition.XCXHbrowerTimes = item.intoChannel.value
                // this.dataAddition.XCXHshareLinkTimes = this.timeChange(item.browsTotalTime)
                this.dataAddition.XCXHshareshop = item.intoChannel.value
                // 时间
                this.dataAddition.XCXbrowerTime = this.timeChange(item.browsTotalTime)
                // this.dataAddition.XCXHLinkTime = this.timeChange(item.browsTotalTime)
                this.dataAddition.XCXHshopTime = this.timeChange(item.browsTotalTime)
                this.dataAddition.XCXbuyTimes = item.orderNumber
                this.dataAddition.XCXarshoptimes = item.orderNumber

              }

              if (item.intoChannel.key=="公众号"){
                this.dataAddition.GZHbrowerTimes = item.intoChannel.value
                this.dataAddition.GZHshareTimes = item.intoChannel.value

                this.dataAddition.GZHbrowerTime = this.timeChange(item.browsTotalTime)
                this.dataAddition.GZHarticleTime = this.timeChange(item.browsTotalTime)

                this.dataAddition.GZHbuyTimes = item.orderNumber
                this.dataAddition.GZHarticletimes = item.orderNumber

              }

              if (item.intoChannel.key=="用户分享"){
                this.dataAddition.userSharebrowerTimes = item.intoChannel.value
                this.dataAddition.userShareTypeLink = item.intoChannel.value

                this.dataAddition.userSharebrowerTime = this.timeChange(item.browsTotalTime)
                this.dataAddition.userShareLinkTime = this.timeChange(item.browsTotalTime)


                this.dataAddition.userSharebuyTimes = item.orderNumber
                this.dataAddition.userSharearLinktimes = item.orderNumber
              }

              if (item.intoChannel.key=="代理分享"){
                this.dataAddition.proxySharebrowerTimes = item.intoChannel.value
                this.dataAddition.proxyShareshareLinkTimes = item.intoChannel.value
                //
                this.dataAddition.proxySharebrowerTime = this.timeChange(item.browsTotalTime)
                this.dataAddition.proxyShareLinkTime = this.timeChange(item.browsTotalTime)

                this.dataAddition.proxySharebuyTimes = item.orderNumber
                this.dataAddition.proxySharearlinktimes = item.orderNumber
              }
            }
          }
        })
      },
      backIndexPage(){
        this.$router.push({
          name: 'DataPanelOperations'
        })
      },

      exportExcel(){
        let url = "_/goldenhome/data/statistics/web/admin/browsData/exportGoods"
        // this.form.setFieldsValue({["goodsName"]:'asd'})

        let  goodsName = this.form.getFieldValue('goodsName')
        let  goodsId = this.form.getFieldValue('goodsId')
        let  membershipGrade = this.form.getFieldValue('membershipGrade')
        let  userPhone = this.form.getFieldValue('userPhone')
        let  nickName = this.form.getFieldValue('nickName')
        let  isOrder = this.form.getFieldValue('isOrder')
        let  intoChannel = this.form.getFieldValue('intoChannel')
        let  shareName = this.form.getFieldValue('shareName')
        let  shareType = this.form.getFieldValue('shareType')
        let  userId = this.form.getFieldValue('userId')


     /*   let  enterPageTime
        let  outPageTime
        if (!!this.form.getFieldValue('enterPageTime-outPageTime')){
          enterPageTime = this.form.getFieldValue('enterPageTime-outPageTime')[0]
          outPageTime = this.form.getFieldValue('enterPageTime-outPageTime')[1]
        }*/
        let params = {
          nickName,
          membershipGrade,
          userPhone,
          goodsName,
          goodsId,
          isOrder,
          intoChannel,
          shareName,
          shareType,
          userId,

         /* enterPageTime,
          outPageTime*/
        }

        console.log("导出的参数:",params)

        this.$export(url,{...params})

      },
      // 时间转换 秒 ==>...
      timeChange(text){
        let result = parseInt(text)
        // let d = Math.floor(result / 3600/24) < 10 ? '' + Math.floor(result / 3600/24) : Math.floor(result / 3600/24);
        let h = Math.floor(result / 3600) < 10 ? '' + Math.floor(result / 3600) : Math.floor(result / 3600);
        let m = Math.floor((result / 60 % 60)) < 10 ? '' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
        let s = Math.floor((result % 60)) < 10 ? '' + Math.floor((result % 60)) : Math.floor((result % 60));
        let res = '';

        // if(d !== '0') res += `${d}天`;
        // if(h !== '0') res += `${h-24*d}小时`;
        // if(h !== '0') res += `${h}小时`;
        if(h !== '0') res += `${h}小时`;
        if(m !== '0') res += `${m}分钟`;
        res += `${s}秒`;
        return res;
      }
    }
  };
</script>

<style lang="less" scoped></style>